<template>
  <ul class="clearfloat leaderboardList">
    <li class="floatLeft">
      <div class="leaderboardListHeader">
        <a href="" class="floatLeft">
          <img src="src/components/leaderboardList/18696095720518497.jpg" alt="">
        </a>
        <div class="leaderboardTitle floatLeft">
          <div>
            <a href="">云音乐飙升榜</a>
          </div>
          <div class="leaderboardIcon">
            <a href="">
              <span class="play"></span>
            </a>
            <a href="">
              <span class="collect"></span>
            </a>
          </div>
        </div>
      </div>
      <ul class="music">
        <li @mouseenter="isEnter(soaringType, index)" @mouseleave="isLeave()" v-for="(item, index) in leaderboardList[soaringType]" :key="item.id" :class="{active:index===number&&type===soaringType}">
          <span class="rank floatLeft" :class="{topThree:index+1<=topThree}">{{index+1}}</span>
          <a href="" class="name floatLeft">{{item.name}}</a>
          <div class="floatRight">
            <a href="" class="floatRight">
              <span class="collect"></span>
            </a>
            <a href="" class="floatRight">
              <span class="add"></span>
            </a>
            <a href="" class="floatRight">
              <span class="play"></span>
            </a>
          </div>
        </li>
        <li>
          <a href="">查看全部>></a>
        </li>
      </ul>
    </li>
    <li class="floatLeft">
      <div class="leaderboardListHeader">
        <a href="" class="floatLeft">
          <img src="src/components/leaderboardList/18713687906568048.jpg" alt="">
        </a>
        <div class="leaderboardTitle floatLeft">
          <div>
            <a href="">云音乐新歌榜</a>
          </div>
          <div class="leaderboardIcon">
            <a href="">
              <span class="play"></span>
            </a>
            <a href="">
              <span class="collect"></span>
            </a>
          </div>
        </div>
      </div>
      <ul class="music">
        <li @mouseenter="isEnter(newMusicType,index)" @mouseleave="isLeave()" v-for="(item, index) in leaderboardList[newMusicType]" :key="item.id" :class="{active:index===number&&type===newMusicType}">
          <span class="rank floatLeft" :class="{topThree:index+1<=topThree}">{{index+1}}</span>
          <a href="" class="name floatLeft">{{item.name}}</a>
          <div class="floatRight">
            <a href="" class="floatRight">
              <span class="collect"></span>
            </a>
            <a href="" class="floatRight">
              <span class="add"></span>
            </a>
            <a href="" class="floatRight">
              <span class="play"></span>
            </a>
          </div>
        </li>
        <li>
          <a href="">查看全部>></a>
        </li>
      </ul>
    </li>
    <li class="floatLeft">
      <div class="leaderboardListHeader">
        <a href="" class="floatLeft">
          <img src="src/components/leaderboardList/18740076185638788.jpg" alt="">
        </a>
        <div class="leaderboardTitle floatLeft">
          <div>
            <a href="">网易原创歌曲榜</a>
          </div>
          <div class="leaderboardIcon">
            <a href="">
              <span class="play"></span>
            </a>
            <a href="">
              <span class="collect"></span>
            </a>
          </div>
        </div>
      </div>
      <ul class="music">
        <li @mouseenter="isEnter(originalMusicType,index)" @mouseleave="isLeave()" v-for="(item, index) in leaderboardList[2]" :key="item.id" :class="{active:index===number&&type===originalMusicType}">
          <span class="rank floatLeft" :class="{topThree:index+1<=topThree}">{{index+1}}</span>
          <a href="" class="name floatLeft">{{item.name}}</a>
          <div class="floatRight">
            <a href="" class="floatRight">
              <span class="collect"></span>
            </a>
            <a href="" class="floatRight">
              <span class="add"></span>
            </a>
            <a href="" class="floatRight">
              <span class="play"></span>
            </a>
          </div>
        </li>
        <li>
          <a href="">查看全部>></a>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {
        number: '',
        type: '',
        soaringType: 0,
        newMusicType: 1,
        originalMusicType: 2,
        topThree: 3
      }
    },
    props: {
      leaderboardList: {
        type: Array
      }
    },
    methods: {
      isEnter(type, index) {
        this.type = type
        this.number = index
      },
      isLeave() {
        this.type = ''
        this.number = ''
      }
    }
  }
</script>

<style>
  .leaderboardList{
    margin-top: 20px;
    background: #f2f2f2;
  }
 .leaderboardList>li{
   width: 230px;
   border: 1px solid #ccc;
   box-sizing: border-box;
 }
  .leaderboardList>li:first-child,.leaderboardList>li:nth-child(2){
    border-right: 0;
  }
  .leaderboardTitle{
    font-weight: bold;
    padding: 10px 0 0 10px;
  }
  .leaderboardTitle a{
    color: #000;
  }
  .leaderboardIcon{
    padding-top: 10px;
  }
  .leaderboardList>li>div{
    height: 120px;
    padding: 20px 0 0 20px;
    box-sizing: border-box;
  }
  .leaderboardListHeader img{
    width: 80px;
  }
  .leaderboardTitle .play{
    display: inline-block;
    width: 22px;
    height: 22px;
    padding-right: 5px;
    background: url('../../../resource/index.png') no-repeat -267px -205px;
  }
  .leaderboardTitle .play:hover{
    background: url('../../../resource/index.png') no-repeat -267px -235px;
  }
  .leaderboardTitle .collect{
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('../../../resource/index.png') no-repeat -300px -205px;
  }
  .leaderboardTitle .collect:hover{
    background: url('../../../resource/index.png') no-repeat -300px -235px;
  }
  .music .rank{
    display: inline-block;
    width: 35px;
    font-size: 16px;
    color: #666;
    text-align: center;
  }
  .music .rank.topThree{
    color: #c10d0c;
  }
  .music .name{
    width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .music div{
    width: 82px;
    height: 32px;
    display: none;
  }
  .music .active .name{
    width: 96px;
  }
  .music .active div{
    display: block;
  }
  .music div a{
    width: 17px;
    height: 17px;
    line-height: 17px;
    margin-top: 7px;
    text-align: center;
  }
  .music div a:first-child{
    margin-right: 15px;
  }
  .music div a:nth-child(2){
    margin-left: 8px;
    margin-right: 8px;
  }
  .music li {
    height: 32px;
    padding-left: 15px;
    font-size: 12px;
    line-height: 32px;
  }
  .music li:last-child{
    text-align: right;
    padding-right: 15px;
    box-sizing: border-box;
  }
  .music li:nth-child(2n-1){
    background: #ddd;
  }
  .music a{
    color: #000;
  }
  .music a span{
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
  }
  .music .active .play{
    background: url('../../../resource/index.png') no-repeat -267px -268px;
  }
  .music .active .play:hover{
    background: url('../../../resource/index.png') no-repeat -267px -288px;
  }
  .music .active .add{
    background: url('../../../resource/icon.png') no-repeat 0 -698px;
  }
  .music .active .add:hover{
    background: url('../../../resource/icon.png') no-repeat -22px -698px;
  }
  .music .active .collect{
    background: url('../../../resource/index.png') no-repeat -296px -268px;
   }
  .music .active .collect:hover{
    background: url('../../../resource/index.png') no-repeat -296px -288px;
  }
</style>
